<template>
  <!--成品库存信息-->
  <el-card class="w-7/12 h-full mr-0.5 px-5 py-5">
    <template #header>
      <div class="card-header flex items-center justify-between color5">
        <div class="flex items-center">
          <i class="iconfont icon-yujingtongji" style="font-size: 24px" />
          <span class="font-semibold text-xl inline-block ml-2"
            >{{$t('common.productInventory')}}</span
          >
        </div>

        <!-- <el-button type="primary" color="#626aef" :dark="isDark" plain @click="resetView">重置</el-button> -->
      </div>
      <div class="divider"></div>
    </template>
    <v-chart ref="currentRef" class="h-full" />
  </el-card>
</template>


<script setup>
import "@/assets/font/iconfont.css";
import { onMounted, ref } from "vue";
import "echarts-gl"; // 导入 echarts-gl
import { getFinishProductQty } from "@/api/warehouse/warehouseApi";
import useI18n from '@/hooks/language'

const { t } = useI18n()
const currentRef = ref(null);
const finishedProductData = ref(null);

// 获取今天的日期
const today = new Date();
const currentYear = today.getFullYear(); // 获取当前年份
const currentDateString = today.toLocaleDateString(); // 获取今天的日期字符串

let yearLabels = [currentDateString]; // 使用当前日期作为标签
let departmentNames = [
  "DCMF0001",
  "DCMF0002",
  "DCMF0003",
  "DCMF0004",
  "DCMF0005",
];

// 初始化图表 3D
// const renderOption = (option) => {

//   const materialCodes = orderList.value?.map(item => item.materialCode); // 获取所有的 materialCode
//   const quantities = orderList.value.map((item,index) => {
//       return [0, index, item.qty];
//   });

//   return {
//     tooltip: {
//       show: true,
//       formatter: function (params) {
//         var departmentIndex = params.value[0]
//         var dateIndex = params.value[1]
//         var tooltipContent = params.seriesName + ': ' + params.value[2]
//         return yearLabels[dateIndex] + '<br />' + departmentNames[departmentIndex] + '<br />' + tooltipContent
//       },
//       textStyle: {
//         color: '#000' // 设置工具提示字体颜色为白色
//       }
//     },
//     xAxis3D: {
//       type: 'category',
//       data: materialCodes, // 使用 materialCodes 作为 x 轴数据
//       name: '',
//       axisLabel: {
//         textStyle: {
//           fontSize: 14,
//           fontWeight: 'bolder',
//           color: '#000' // 设置 x 轴标签字体颜色为白色
//         }
//       }
//     },
//     yAxis3D: {
//       type: 'category',
//       axisLabel: {
//         textStyle: {
//           color: '#000', // 设置 y 轴标签字体颜色为黑色
//           fontSize: 18 // 增大 Y 轴刻度字体大小
//         }
//       }
//     },
//     zAxis3D: {
//       type: 'value',
//       name: '',
//       axisLabel: {
//         textStyle: {
//           color: '#000' // 设置 z 轴标签字体颜色为白色
//         }
//       }
//     },
//     grid3D: {
//       top: 10,
//       bottom: 1,
//       boxWidth: 300,
//       boxDepth: 50,
//       axisTick: { show: false },
//       axisLine: {
//         lineStyle: {
//           color: '#ccc',
//           width: 1
//         }
//       },
//       axisLabel: {
//         textStyle: {
//           color: '#000', // 设置坐标轴标签字体颜色为白色
//           fontSize: 16
//         }
//       },
//       viewControl: {
//         alpha: 0,
//         beta: 0,
//         zoom: 1,  // 使用 zoomLevel 控制缩放比例
//         maxZoom: 10, // 最大缩放比例
//         minZoom: 0.5 // 最小缩放比例

//       },
//     },
//     series: [
//       {
//         type: 'bar3D',
//         name: '数量',
//         data: quantities?.map(function (item) {
//           return { value: [item[1], item[0], item[2]] }
//         }),
//         shading: 'lambert',
//         // 添加barSize控制柱子宽度
//         barSize: 40, // 可以调整这个值来改变柱子的粗细，值越大柱子越粗
//         // 如果需要分别控制x和y方向的宽度，可以使用数组
//         // barSize: [20, 20], // [x方向宽度, y方向宽度]
//         label: {
//           show: true,
//           distance: 10,
//           textStyle: {
//             color: '#000',
//             fontSize: 18,
//             borderWidth: 1,
//           }
//         },
//         emphasis: {
//           label: {
//             fontSize: 22,
//             color: '#8b5cf6'
//           },
//           itemStyle: {
//             color: '#8b5cf6'
//           }
//         },
//         itemStyle: {
//           color: '#6366f1',
//           // 可以添加透明度
//           opacity: 0.8,
//           // 可以添加边框
//           borderWidth: 1,
//           borderColor: '#4f46e5'
//         },
//       }
//     ]
//   }
// }
// 初始化图表 普通
const renderOption = (option) => {
  const materialCodes = orderList.value?.map((item) => item.materialCode); // 获取所有的 materialCode
  const quantities = orderList.value.map((item, index) => {
    return [0, index, item.qty];
  });

  return {
  tooltip: {
    show: true,
    formatter: function (params) {
      return params.name + "<br />" + t('mes.qty')+"：" +params.value;
    },
    textStyle: {
      color: "rgba(99,99,99,0.8)", // 设置工具提示字体颜色
    },
  },
  grid: {
    top: '10%',    // 上边距
    left: '10%',   // 左边距
    right: '0',  // 右边距
    bottom: '20%', // 下边距
  },
  xAxis: {
    type: "category",
    data: materialCodes, // 使用 materialCodes 作为 x 轴数据
    name: "",
    axisLine: {
      show: true, // 显示 X 轴线
      lineStyle: {
        color: "rgba(99,99,99,0.8)", // X 轴线颜色
      },
    },
    axisTick: {
      show: false, // 隐藏 X 轴刻度
    },
    axisLabel: {
      textStyle: {
        fontSize: 14,
        fontWeight: "bolder",
        color: "rgba(99,99,99,0.8)", // 设置 x 轴标签字体颜色
      },
      rotate: materialCodes.length > 8 ? 45 : 0, // 根据数据量决定倾斜角度
      interval: 0, // 显示所有标签
    },
    splitLine: {
      show: true, // 显示网格线
      lineStyle: {
        color: "#ccc", // 网格线颜色
        type: "dashed", // 网格线类型
      },
    },
  },
  yAxis: {
    type: "value",
    axisLine: {
      show: true, // 显示 Y 轴线
      lineStyle: {
        color: "rgba(99,99,99,0.8)", // Y 轴线颜色
      },
    },
    axisLabel: {
      textStyle: {
        color: "rgba(99,99,99,0.8)", // 设置 y 轴标签字体颜色
        fontSize: 18, // 增大 Y 轴刻度字体大小
      },
    },
    splitLine: {
      show: true, // 显示网格线
      lineStyle: {
        color: "#ccc", // 网格线颜色
        type: "dashed", // 网格线类型
      },
    },
  },
  series: [
    {
      type: "bar",
      name: "数量",
      data: quantities.map((item) => item[2]), // 直接使用数量
      itemStyle: {
        color: "#6366f1",
        opacity: 0.8,
        borderWidth: 1,
        borderColor: "#4f46e5",
      },
      barWidth: '30%', // 设置柱子的宽度，可以根据需要调整
      label: {
        show: true,
        position: "top", // 标签位置
        textStyle: {
          color: "rgba(99,99,99,0.8)",
          fontSize: 18,
          borderWidth: 1,
        },
      },
      emphasis: {
        label: {
          fontSize: 22,
          color: "#8b5cf6",
        },
        itemStyle: {
          color: "#8b5cf6",
        },
      },
    },
  ],
};
};

//重置视图
// const resetView = () => {
//   currentRef.value.setOption(renderOption())
// }

const orderList = ref([
  { materialCode: "Dafede", qty: 145 },
  { materialCode: "Dafede1", qty: 45 },
  { materialCode: "Dafede2", qty: 545 },
  { materialCode: "Dafede3", qty: 145 },
  { materialCode: "Dafede4", qty: 45 },
  { materialCode: "Dafede45", qty: 545 },
  { materialCode: "Dafede6", qty: 145 },
  { materialCode: "Dafede7", qty: 45 },
  { materialCode: "Dafede8", qty: 545 },
  { materialCode: "Dafede9", qty: 145 },
]);
const getList = async () => {
  try {
    let res = await getFinishProductQty();
    orderList.value = res.data;
  } catch (e) {
    console.log(e);
  }
};
onMounted(async () => {
  await getList();
  currentRef.value.setOption(renderOption());
});
</script>


<style scoped lang="scss">
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 8px;
}
::v-deep(.el-card__body) {
  padding: 0;
}
</style>
